<template>
  <div class="d-flex justify-center mt-4">
    <el-pagination background @current-change="handleCurrentChange" @size-change="onSizeChange" :current-page="page" :page-size="pageSize" :page-sizes="pageSizes" layout="sizes,total, prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "BasePagination",
  props: {
    value: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      page: 1,
      pageSizes: [10, 20, 50, 100,200,500,1000],
    };
  },
  watch: {
    value: {
      handler(page) {
        this.page = page;
      },
    },
    page: {
      handler(page) {
        this.$emit("input", page);
      },
    },
  },

  methods: {
    handleCurrentChange(page) {
      this.$emit("input", page);
      //this.$emit("change", page);
      this.$emit("change", { page: page });
    },

    // 动态改变每页显示条数
    onSizeChange(e) {
      console.log(e)
      this.$emit("change", { pageSize: e });
    },
  },
};
</script>
